---
title: Шема боја
image: /images/user-guide/fields/field.png
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

## Картон са шемом боја

Представља различите шеме боја и посебно је прилагођен за светле и тамне теме.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemeCard } from "twenty-ui/display";

export const MyComponent = () => {
  return (
      <ColorSchemeCard
      variant="Dark"
      selected={true}
      />
  );
};
```

</Tab>

<Tab title="Props">

| Својства       | Тип                                     | Опис                                                                              | Подразумевано |
| -------------- | --------------------------------------- | --------------------------------------------------------------------------------- | ------------- |
| variant        | низ                                     | Варијанта шеме боја. Опције укључују `Тамно`, `Светло` и `Систем` | светли        |
| изабрано       | булевска вредност                       | Ако је `тачно`, приказује ознаку за потврду која указује на изабрану шему боја    |               |
| додатни пропси | `React.ComponentPropsWithoutRef<'div'>` | Стандардни HTML својства `div` елемента                                           |               |

</Tab>

</Tabs>

## Бирач шеме боја

Омогућава корисницима да изаберу између различитих шема боја.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemePicker } from "twenty-ui/display";

export const MyComponent = () => {
  return <ColorSchemePicker
  value="Dark"
  onChange
  />;
};
```

</Tab>

<Tab title="Props">

| Својства   | Тип         | Опис                                                                             |
| ---------- | ----------- | -------------------------------------------------------------------------------- |
| вредност   | `Шема боја` | Тренутно изабрана шема боја                                                      |
| приПромени | функција    | Функција повратног позива коју желите активирати када корисник изабере шему боја |

</Tab>

</Tabs>
